Édition : Upload d'image

Upload d'image

D'ici la nouvelle version officielle de ChuWiki, vous pouvez télécharger des images grâce à ces pages.
Un grand merci à Cyril


Décidément ce wiki est génial, ça répond parfaitement à ce que j'attendais !! J'ai même créé une page permettant de faire un upload d'image sur le serveur. C'est un lien qui se trouve sur la page d'accueil, et n'est donc pas integré dans chuwiki. On clique sur le lien, on arrive sur une page où l'on choisit son fichier, puis on l'envoie. Il est alors stocké dans le répertoire 'images'. Ensuite, dans les pages où l'on veut afficher l'image, il suffit de placer le code suivant : ((images/image.jpg)).

Voici le code php pour ceux que ça intéresse (ça marche très bien sur free) :

upload.php

 <html>
 <body>
 <center>
 <?php
 // Repertoire de stockage des images
 $repedest = "images/";
 if ( file_exists($repedest.$fichier_name) ) {
     echo "<big>Le fichier ".$fichier_name." existe déjà !!</big>";
 } else {
     if ( !file_exists($fijchier) ) {
         echo "<big>Erreur d'upload...</big>";
     } else { // ici on déplace le fichier ou on veut
         if ( !@copy($fichier,$repedest.$fichier_name) ) {
             echo "<big>Erreur, contactez l'administrateur...</big>";
         } else {
             echo "<big>Fichier ".$fichier_name." ajouté</big>";
             echo "<br><br>Pour afficher votre image dans une page, inserez le code suivant : <b>((/images/".$fichier_name."))</b>";
         }
     }
 }
 ?>
 <br>
 <br>
 <a href=index.php>[Retour a l'accueil]</a>
 <a href=upload.html>[Charger une nouvelle image]</a>
 </center>
 </body>
 </html>

Et la page upload.html qui permet d'envoyer l'image :

 <html>
 <body>
 <center>
 <big>Telechargement d'une image sur le serveur</big><br><br>
 Choisissez l'image sur votre disque dur, puis cliquez sur 'Ajouter l'image'<br><br>
 <form name="form1" method="post" action="upload.php" enctype="multipart/form-data">
 <input name="fichier" type="file" size="50">
 <br><br>
 <input type="submit" name="Submit" value="Ajouter l'image" class="bouton">
 </form><br>
 <a href=index.php>[Annuler]</a>
 </center>
 </body>
 </html>

Cyril


Pour ajouter un peu de sécurité en empêchant l'envoi facile de fichiers .php:

 $repedest = "images/";
 $valid_ext = array('png', 'gif', 'jpg', 'jpeg');
 $taille_max = 100000;
 if ((!in_array( substr(strrchr($fichier_name, '.'), 1), $valid_ext ) )  ||  filesize($fichier) > $taille_max) {
     echo "<big>Veuillez s&eacute;lectionner un fichier de type png, gif ou jpg de moins de 100ko !</big>";
 } else {
     if ( file_exists($repedest.$fichier_name) )
         ...
 }

Ces quelques lignes s'insèrent dans upload.php entre $repedest et if ( file_exists puis il faut ajouter un crochet fermant aux 3 autres
avant "?>"

Elles permettent aussi de limiter la taille du fichier à 100ko (100 000octets)
Pierre


Bonjour, voilà ça ne marche pas avec la partie sécurité, mais sans c'est bon. Est ce qu'une bonne âme peut me donner le code du fichier complet avec la partie sur la sécurité, sinon ce script est génial, merci au contributeur.

David

 <?php
 // Repertoire de stockage des images
 $repedest = "images/";
 $valid_ext = array('png', 'gif', 'jpg', 'jpeg');
 $taille_max = 100000;
 
 if ((!in_array( substr(strrchr($fichier_name, '.'), 1), $valid_ext ) ) || filesize($fichier) > $taille_max)
 	{echo "<big>Veuillez s&eacute;lectionner un fichier de type png, gif ou jpg de moins de 100ko !</big>"; }
 else
 	{
 		if ( file_exists($repedest.$fichier_name) )
 			{ echo "<big>Le fichier ".$fichier_name." existe d&eacute;j&agrave; !!</big>";
 			}
 		else
 			{ if ( !file_exists($fichier) )
 				  { echo "<big>Erreur d'upload...</big>";
  				  }
 			  else
 				  { // ici on déplace le fichier ou on veut
 					if ( !@copy($fichier,$repedest.$fichier_name) )
 						{ echo "<big>Erreur, contactez l'administrateur...</big>";
 						}
 					else
 						{ echo "<big>Fichier ".$fichier_name." ajout&eacute;</big>";
 						  echo "<br><br>Pour afficher votre image dans une page, ins&eacute;rez le code suivant : <b>((/images/".$fichier_name."))</b>";
 						}
  				  }
 			}
 		}	
 ?>

Pierre


Excellente astuce !!
L'upload sur le serveur fonctionne très bien, pourtant les images ne s'affichent pas avec par ex ((images/toto.jpg))
Problème de configuration ? J'ai tenté d'indiquer "ImagePath = images" dans configuration.ini mais sans succès.

Franck

Il faut écrire ((/images/toto.jpg)) avec un slash devant le mot images
Pierre


Parfait ;-)) mais comment faire pour integrer ce formulaire au theme par default ?
Merci d'avance pour toute piste...
Pamela


Bonjour, le script php (le premier en haut de page) me retourne ces erreurs :

Notice: Undefined variable: fichier_name in C:\MonRep\MonWiki\upload.php on line 7
Notice: Undefined variable: fichier_name in C:\MonRep\MonWiki\upload.php on line 8
Le fichier existe déjà !!

J'ai fais un copier/coller des contenus des 2 fichiers (upload.html et upload.php) donnés en haut de page.

Où est ma boulette ?

Merci Fred


Bonjour,

Je n'ai malheureusement jamais réussi à faire fonctionner le script ci-dessus.
Par contre, j'ai trouvé sur PHPscripts WD_Upload V2 par Webdeb73 qui fonctionne parfaitement :
http://www.phpscripts-fr.net/portions/portion.php?id=101

J'ai intégré le lien au début de la rubrique "Règles de formatage" avec un target="_blank", ce qui permet d'uploader des images en rédigeant son message.

Dans lang/fr/rules.html, avant <h2>Règles de formatage</h2> :

 <h2>Insérer une image</h2>
 <dl>
 <dt><code>((image))</code> ou <code>((image|texte alternatif|alignement))</code></dt>
 <dd><br/><a href="http://www.monsite.com/upload" target="_blank"><font size="4"><b>Télécharger une image sur le serveur</b></font></a> (jpg, gif, png ou jpeg, maximum 640x640 pixels et 100 Ko)</dd>
 </dl>

Cordialement,
Franck


Bonjour, petit problème me concernant, j'arrive bien à uploader les images vers le dossier images :) mais lorsqu'il est question de l'afficher dans une page, je ne vois que le lien ((/images/xx.jpg)) ... Voilà voilà, j'ai même essayer de l'adapter à d'autres wikis, étant donné mon statut de novice dans le wiki, j'aimerais savoir également si cela est réellement possible hors de chuwiki merci :)

Alors, j'ai eu le même problème. Je pense que c'est dû à la gestion des chemins de chuwiki. Donc, tu peux régler le problème en lui indiquant un chemin absolu. Par exemple, sur ton serveur local, au lieu d'indiquer ((/images/xx.jpg)) tu mets ((http://localhost/chuwiki/images/xx.jpg)) (si ton wiki se trouve dans le dossier chuwiki situé à la racine de ton serveur, bien sur.

Cette méthode fonctionne bien mais malheureusement elle fait perdre un énorme avantage de chuwiki : la portabilité... En effet, vu que tout tes chemins sont absolu, tu perds toute la portabilité de ton wiki... (à moins de modifier à la main chaque page de ton wiki si tu changes de serveur...)

Donc, en complément de cette méthode, j'ai apporté une modification au fichier chu_to_xhtml.php situé dans /sdk/WikiRenderer/rules Plus précisement, j'ai très légèrement modifié la classe chuxhtml_image

class chuxhtml_image extends WikiTagXhtml {
    var $name = 'image';
    var $beginTag = '((';
    var $endTag = '))';
    var $attribute = array('src','alt','align','longdesc');
    var $separators = array('|');

    function getContent(){
        $contents = $this->wikiContentArr;
        $cnt = count($contents);
        $attribut = '';
        $wikiPath = 'http://localhost/chuwiki'; //ici, on indique l'adresse du wiki : à adapter en fonction de ton adresse
        if($cnt > 4) $cnt = 4;
        switch($cnt){
            case 4:
                $attribut .= ' longdesc = "'.$contents[3].'"';
            case 3:
                if($contents[2] == 'l' ||$contents[2] == 'L' || $contents[2] == 'g' || $contents[2] == 'G')
                    $attribut .= ' style = "float:left;"';
                elseif($contents[2] == 'r' ||$contents[2] == 'R' || $contents[2] == 'd' ||$contents[2] == 'D')
                    $attribut .= ' style = "float:right;"';
            case 2:
                $attribut .= ' alt = "'.$contents[1].'"';
            case 1:
            default:
                $attribut .= ' src = "'.$wikiPath.$contents[0].'"'; //ici, on concatène le chemin du dossier dans lequel se trouve le wiki avec l'adresse relative de l'image
                if($cnt == 1) $attribut .= ' alt = ""';
        }
        return '<img'.$attribut.'/>';
    }
}

J'ai donc créé la variable $wikiPath qui est le chemin de te wiki. Puis je concatène cette variable avec le chemin relatif de ton image. Cette solution est un plus portable que la précédente car, si jamais tu changes de serveur, de nom de domaine ou que tu changes ton wiki de dossier, il te suffira de changer la variable $wikiPath et le tour sera joué. Mais ATTENTION !!! Cette solution te fait perdre la possibilité d'ajouter des photos d'autres sites sur ton wiki !!! Avec cette modification, tu seras OBLIGE d'uploader sur ton serveur toutes les images que tu veux mettre sur ton wiki.

Je n'ai pas précisé mais, avec cette deuxième méthode, tu peux utiliser normalement tes chemins ((/images/xx.jpg)) , ca marchera !

J'espère que ça t'aidera

Cdlt, Bertrand


Bon, oui, un upload, c'est sympa,
c'est minimal
mais ça peut suffire ;) un peu plus loin, y a le gestionnaire de fichier, c'est mieux, même si souvent c'est plus lourd, on voit même des gestionnaires de fichiers qui s'appuyent sur SQL, donc faudrait un gestionnaire de fichiers un peu dans l'idée de ChuWiki, mais sans forcément sacrifier en flexibilité d'usage, ni en ergonomie, ni en facilité ...
et bien voilà w2box - Web 2.0 File Repository for PHP

au programme de w2box:

le tout à la sauce Web 2.0 et Ajax, valide xHTML/CSS !
moderne, simple et rapide ...

minimal par le poids et le nombre de fichiers :

Personnellement, j'ai réussi son intégration dans un ChuWiki,
cependant connaissant mal le système de template de ChuWiki, ça tient plus du bricolage que d'autre chose mais ça pourrait être complètement intégré dans ChuWiki à l'instar des fichiers history.php et edit.php.

mercredi 26 avril 2006 14:20


Bonjour, je viens de commencer sur ce wiki et c'est exactement ce que je cherche. J'ai bien cree les deux pages (php et html) et je les ai placées dans le rep racine de mon wiki j ai aussi cree le lien mais quand je le suis je me retrouve sur une page vierge je pense que je my suis mal prix quelqu'un peut m'aider voila le texte de mon lien \-ajouter sur le serveur|upload.hml \

merci pour le coup de main

Jeremy


Salut Jeremy.. bon le message d'avant toi date d'il ya fort longtemps mais si j'ai bien saisi il faudrait plutôt que ton lien soit [ ajouter sur le serveur | ../upload.html] ou alors indique carrement l'url complète. sinon la requete est prise en compte par le script wiki ...

Florent (le 3 avril 2007 )


Super, j'ai mis chuwiki dans un site, et le upload.php (avec le contrôle de type et de taille) et upload.html et çà marche parfaitement. Merci, j'espère que le produit vit encore car il répond parfaitement à mon besoin de tableau blanc simple intégré dans un CMS

Joss (le 13 novembre 2008 )


Comme Jeremy, j'ai eu droit à une page blanche. C'est normal, je suis en PHP-5.

avec ça, c'est bon:

# more upload.php 
<html>
<body>
<center>
<?php
//phpinfo();
// Repertoire de stockage des images
$repedest = "images/";
$fichier=$_FILES['fichier'];
$fichier_name=$fichier['name'];
if ( file_exists($repedest.$fichier_name) ) {
echo "<big>Le fichier ".$fichier_name." existe dÈj‡ !!</big>";
} else {
if ( !file_exists($fichier['tmp_name']) ) {
echo "<big>Erreur d'upload...</big>";
} else { // ici on dÈplace le fichier ou on veut
if ( !@copy($fichier['tmp_name'],$repedest.$fichier_name) ) {
echo "<big>Erreur, contactez l'administrateur...</big>";
} else {
echo "<big>Fichier ".$fichier_name." ajoutÈ</big>";
echo "<br><br>Pour afficher votre image dans une page, inserez le code suivant : <b>((/images/".$fichier
_name."))</b>";
}
}
}
?>
<br>
<br>
<a href=index.php>[Retour a l'accueil]</a>
<a href=upload.html>[Charger une nouvelle image]</a>
</center>
</body>
</html>

Xgen (le 3 décembre __2008 __ )

Salutations à tout (es) les chuwikisiens, chuwikisiennes. Une petite contribution avec gestion de la taille , extension et poids de l'image uploadée. J'utilise la fonction moveuploadedfile() et non copy()

<html>
<body>
<center>
<?php

if($_FILES)
{

	$dest = "img/";// Repertoire de stockage des images à la racine du wiki comme ce script
  	$taille_maxi = 1000000;
  	$fichier_name = basename($_FILES['fichier']['name']);
	$taille = filesize($_FILES['fichier']['tmp_name']);
	$infos_img = getimagesize($_FILES['fichier']['tmp_name']);
  	$extensions = array('.jpg','.jpeg','.gif','.png'); //definition des extensions acceptées
	$extension = strrchr($_FILES['fichier']['name'], '.'); 

//Gestion des erreurs
  if(!in_array($extension, $extensions)) //Si l'extension n'est pas dans le tableau
  {
     $erreur = 'Vous devez uploader un fichier de type  .jpg,.gif ou .png';
  }
  if($taille>$taille_maxi)
  {
     $erreur = 'Le fichier est trop volumineux...';
  }
  
  
  if ( file_exists($dest.$fichier_name) ) 
	{
		$erreur =  "Le fichier ".$fichier_name." existe d&eacute;j&agrave; !!";
	}	 
	if($infos_img[0] > 100 && $infos_img[1] >100)
  {
    $erreur = '<strong>les dimensions de votre images sont trop grandes . Pour rappel 100 x100 px</strong>';
  }
  
    if(!isset($erreur)) //S'il n'y a pas d'erreur, on upload
    {

// ici on déplace le fichier ou on veut
				if (!move_uploaded_file($_FILES['fichier']['tmp_name'],$dest.$fichier_name) ) 
			{
				echo "Erreur, contactez l'administrateur...";
			} 
			else 
			{
				echo "Fichier ".$fichier_name." ajout&eacute;";
				echo "<br><br>Pour afficher votre image dans une page, inserez le code suivant : <b>((/img/".$fichier_name."))</b>";
			}
		}
	else
	{
			echo $erreur;
	}
}

?>
<p>Téléchargement d'une image sur le serveur</p>

<form name="form1" method="post" enctype="multipart/form-data">
<p><input name="fichier" type="file" ></p>

<input type="submit" name="submit" value="Ajouter l'image">
</form>
</center>

</body>
</html>

kraddle (13 mai 2009)

Règles de formatage

_texte_
Faire une emphase (italique)
__texte__
Faire une emphase forte (gras)
@@texte@@
Faire un petit code
''texte|langue|source''
Faire une petite citation
>texte
Faire un paragraphe de citation
[texte|URI|langue|titre]
Faire un lien vers une page, les paramètres sont optionnels
((image|texte alternatif|alignement))
Ajouter une image, alignement peut valoir G(auche), D(roite) ou C(entre)
texte
Tout texte écrit simplement sera transformé en paragraphes.
!titre1, !!titre2, !!!titre3, etc.
Créer un titre d'un niveau égal au nombre de !
-texte ou *texte
Faire une liste d'éléments non numérotés
#texte
Faire une liste d'éléments numérotés
;titre:définition
Faire une définition/liste de définitions
??acronyme|titre??
Faire un acronyme
[ESPACE]texte ou {{{texte}}}
Le texte sera préformaté, utile pour écrire des bouts de code
==== ou ---- (au moins 4)
Une ligne de séparation horizontale
\
Si vous ne voulez pas que la syntaxe wiki s'applique, faites précéder les caractères spéciaux par des anti-slashs.